<template>
  <div>
    <a-form style='max-width: 580px; margin: 40px auto 0;'>
      <a-alert
        :closable='true'
        message='题目确认提交后，若需要修改，可以到 [设题/修改题目] 中进行修改。'
        style='margin-bottom: 24px;'
      />
      <a-form-item
        label='题目名称'
        :labelCol='labelCol'
        :wrapperCol='wrapperCol'
        class='stepFormText'
      >
        <a-descriptions bordered>
          <a-descriptions-item label='#' :span='3'>
            {{ formData.title }}
          </a-descriptions-item>
        </a-descriptions>
      </a-form-item>
      
      <!--出题人基本信息展示-->
      <a-form-item
        label='出题人信息'
        :labelCol='labelCol'
        :wrapperCol='wrapperCol'>
        <a-descriptions bordered>
          <a-descriptions-item label='姓名' :span='3'>
            {{ $store.state.user.name }}
          </a-descriptions-item>
          
          <a-descriptions-item label='学号'>
            {{ $store.state.user.info.studentId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-form-item>
      
      <a-form-item
        label='难度标签'
        :labelCol='labelCol'
        :wrapperCol='wrapperCol'
        class='stepFormText'
      >
        <a-tag color='green'>{{ formData.level }}</a-tag>
      </a-form-item>
      
      <a-form-item
        label='题目标签'
        :labelCol='labelCol'
        :wrapperCol='wrapperCol'
        class='stepFormText'
      >
        <a-tag v-for='tag in formData.tags'>
          {{ tag }}
        </a-tag>
      </a-form-item>
    
    </a-form>
    
    <a-divider orientation='left'>
      <h3>题目详细信息与代码模板</h3>
    </a-divider>
    
    <!--展示题目详细信息和代码模板-->
    <QuestionPage
      :title='formData.title'
      :code-template='formData.codeTemplate'
      :tags='formData.tags'
      :markdown-content='formData.detail'
      :read-only='true' />
    
    <a-form style='max-width: 580px; margin: 40px auto 0;'>
      <a-form-item :wrapperCol='{span: 19, offset: 5}'>
        <a-button @click='prevStep'>上一步</a-button>
        <a-button :loading='loading' style='margin-left: 20px' type='primary' @click='nextStep'>提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import QuestionPage from '@/views/reply/components/QuestionPage.vue'
import { setTopic } from '@/api/adminTopic'

export default {
  name: 'Step2',
  components: {
    QuestionPage
  },
  props: {
    formData: {
      required: true,
      type: Object
    }
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        this.formData = newVal
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      loading: false,
      timer: 0
    }
  },
  methods: {
    nextStep() {
      // 转递表单给父组件并发送请求
      this.loading = true
      setTopic(this.formData).then((response) => {
        this.$emit('nextStep', {})
        // 将响应的数据发送到step3
        this.loading = false
        this.$emit('resData', response.data)
      })
      this.loading = false
    },
    prevStep() {
      // 返回上一步修改将原信息返回
      this.$emit('prevStep', this.formData)
    }
  }
}
</script>

<style lang='less' scoped>
.stepFormText {
  margin-bottom: 24px;
  
  .ant-form-item-label,
  .ant-form-item-control {
    line-height: 22px;
  }
}

</style>
